<template>
    <div>
        <el-row class="rowCl">
            <el-col :span="2">
                <div class="grid-content bg-purple"> &nbsp;</div>
            </el-col>
            <el-col :span="20">
                <div class="grid-content bg-purple-light">
                    <el-card class="box-card">
                        <h3>登录</h3>
                        <el-form :rules="rules" ref="userForm">
                            <el-row>
                                <el-col :span="24">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="用户名：" prop="userName">
                                            <el-input v-model="userName"></el-input>
                                            <span>初始账号：111</span>
                                        </el-form-item>

                                    </div>
                                </el-col>
                            </el-row>
                            <el-row style="margin-top: 10px">
                                <el-col :span="24">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="用户密码：" prop="password">
                                            <el-input v-model="password" show-password></el-input>
                                            <span>初始密码：111</span>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>

                        </el-form>
                        <el-button type="primary" style="margin-top: 10px;margin-right: 10px"
                                   @click="submitForm()">登录
                        </el-button>
                        <el-button @click="resetForm()">取消</el-button>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="2">
                <div class="grid-content bg-purple">&nbsp;</div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "LoginView",
        data() {
            return {
                userName: '',
                password: '',
            }
        },
        mounted() {
        },
        methods: {
            submitForm() {
                //登录
                this.$axios.get("api/sysuser/login?name=" +
                    this.userName + "&pwd=" + this.password).then(
                    r => {
                        let userObj = r.data;
                        console.log(r.data)
                        if (userObj !== null & userObj !== "") {
                            sessionStorage.setItem("user", JSON.stringify(userObj))
                            console.log("abc")
                            this.$router.push("IndexView")
                        }
                        else {
                            alert("权限不足")
                        }

                    }
                );
        },

        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
    }
</script>

<style scoped>
    .rowCl {
        margin-top: 5%;
    }
</style>